/* pages/appointment/index.wxss */
.appointment {
  background: #FAF9FF;
  .page-content {
    // padding:0 30rpx;
    width:100%;
    box-sizing: border-box;
    .top {
      position: relative;
      width: 100%;
      height:450rpx;
      .top-bg {
        width: 100%;
        height: 100%;
      }

      .top-title {
        position: absolute;
        left: 20rpx;
        width: 100%;
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: rgb(252, 250, 250);
        display: flex;
        align-items: center;
        justify-content: left;

        // border:1px solid red;
        .back {
          position: absolute;
          left: 10rpx;
        }
      }
    }

 
    .appointment-content{
      position:absolute;
      top:300rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 92%;
    }
    .form {
      padding: 30rpx 20rpx; 
      margin: 30rpx auto;
      background-color: #fff;
      border-radius: 10rpx;
      // margin-top:-100rpx;
      z-index:100;
      .group-tip{
        text-align:right;
        width:100%;
        margin-bottom:20rpx;
        .group-tip-icon{
          display: inline-block;
          width:29rpx;
          height:29rpx;
          vertical-align: middle;
        }
      }
      .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #dfdfdf;
        padding: 10rpx 0;
        font-size:28rpx;
        
        +.form-item {
          margin-top: 34rpx;
        }
        

        .left {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;

          .required {
            color: #FF6326;
            margin-right: 6rpx;
          }
        }

        .right {
          display: flex;
          align-items: center;

          .picker {
            display: flex;
            align-items: center;

            .picker-content {
              display: flex;
              align-items: center;
            }
          }

          .input-wrapper {
            margin-right: 12rpx;
            // border: 1px solid red;

            .input {
              text-align: right;
            }
          }

          .icon-arrow {
            width: 19rpx;
            height: 30rpx;
          }

          .icon-geo {
            width: 26rpx;
            height: 32rpx;
          }

          .icon-area {
            width: 26rpx;
            height: 26rpx;
            transform: scale(1.35);
          }
        }
        .type{
          padding:10rpx 30rpx;
          border:1px solid #CBCBCB;
          margin-left:10rpx;
          color:#CBCBCB;
          border-radius: 8rpx;
        }
        .type.active{
          background-color: #FA9616;
          color:#fff;
          border:1px solid transparent;
        }
      }
    }
    

    .btn-appointment {
      display: block;
      width: 626rpx;
      height: 87rpx;
      margin: 50rpx auto 10rpx auto;
    }
    .certificate{
      margin:30rpx auto;
      width:100%;
      background-color: #fff;
      padding:50rpx 30rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      .info-text{
        margin-bottom:20rpx;
        .title{
          font-size:32rpx;
          font-weight:600;
          margin-bottom:10rpx;
        }
        .info{
          font-size:28rpx;
          font-weight:normal;
          color:#807F84;
          line-height:40rpx;
        }
      }
      .img-box{
        width:100%;
        height:160rpx;
        position:relative;
        margin-bottom:30rpx;
        .group-img{
          width:100%;
          height:160rpx;
          position:absolute;
          top:0;
          left:0;
        }
        .price{
          position:absolute;
          right:50rpx;
          top:10rpx;
          font-size:36rpx;
          color:#fff;
          font-style:italic;
          font-weight:600;
          z-index:100;
        }
        .discount{
          position:absolute;
          right:100rpx;
          font-style: italic;
          bottom:40rpx;
          font-size:30rpx;
          color:#fff;
          font-weight:550;
          z-index:100;
        }
        .num{
          position:absolute;
          right:145rpx;
          bottom:60rpx;
          font-size:60rpx;
          color:#fff;
          font-weight:600;
          z-index:800;
          font-style:italic;
        }
      }
      // image{
      //   width:100%;
      //   margin-bottom:20rpx;
      // }
    }

    .share {
      position: fixed;
      width: 99rpx;
      height: 99rpx;
      right: 0rpx;
      top: 480rpx;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      background: none;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .customer-service {
      position: fixed;
      width: 99rpx;
      height: 99rpx;
      right: 0rpx;
      top: 585rpx;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      background: none;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  // .zan-dialog{
  //   display: none;
  // }
  .zan-dialog-mask{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:200;
    background:rgba(0,0,0,0.4);
    display: none;
  }
  .zan-dialog-container{
    padding:30rpx;
    box-sizing: border-box;
    // width:100%;
    position:fixed;
    width:80%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:999;
    background-color: #fff;
    display: none;
  }
  .title-line{
    position:relative;
    .title{
      width:100%;
      text-align: center;
      font-size:32rpx;
      font-weight:600;
      // position:absolute;
      // top:5rpx;
      // left:50%;
      // transform: translateX(-50%);
    }
    .close-icon{
      width:21rpx;
      height:21rpx;
      position:absolute;
      top:5rpx;
      right:0;
    }
  }
  .content-box{
    margin:30rpx 0;
    .content-item{
      font-size:28rpx;
      margin-bottom:30rpx;
      .content-title{
        font-size:28rpx;
        font-weight:700;
        margin-bottom:10rpx;
      }
      .buzou-img{
        width:479rpx;
        margin:20rpx 30rpx;
      }
      .origin-price{
        margin-bottom:10rpx;
      }
      .num-text{
        font-size:24rpx;
        color:#807F84;
        margin-bottom:10rpx;
      }
      .circle-num{
        border:1px solid #807F84;
        border-radius: 50%;
        width:32rpx;
        // height:32rpx;
        // line-height: 32rpx;
        text-align: center;
       box-sizing: border-box;
        display: inline-block;
        margin-right:5rpx;
        // padding-bottom:1rpx;
      }
      .tip{
        margin-bottom:10rpx;
      }
    }
  }
  // .zen-dialog-show{
  //   display: block;
  // }
  .zan-dialog-show .zan-dialog-mask{
    display: block;
  }
  .zan-dialog-show .zan-dialog-container{
    // transform: translateY(0);
    display: block;
  }
  .green-text{
    color:#009643
  }
}